<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="clearfix">
          <!-- 左边区域 -->
          <div class="left">
            <span class="jian">关键字</span>
            <span
              ><el-input
                v-model="keyword"
                type="search"
                placeholder="根据文章标题搜索"
                clearable
                style="margin-left: 10px"
                ref="input"
              ></el-input>
            </span>
            <span class="state">状态</span>
            <span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>

          <!-- 右边区域 -->
          <el-button class="right" type="text">
            <el-button size="small" @click="clearBtn" class="clear"
              >清除</el-button
            >
            <el-button type="primary" size="small" @click="searchFn"
              >搜索</el-button
            >
          </el-button>
          <div class="success">
            <el-button type="success" icon="el-icon-edit" size="small"
              >新增技巧</el-button
            >
          </div>
        </div>

        <div class="el-alert">
          <!-- 数据层 -->
          <el-alert type="info" show-icon>
            <span class="math">数据一共 {{ counts }}条</span>
          </el-alert>
        </div>
        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 10px">
          <el-table-column prop="id" label="编号" width="190">
          </el-table-column>
          <el-table-column prop="title" width="300" label="文章标题">
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="100">
             <template v-slot="scope">
              <span>{{ scope.row.createTime | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作" width="200">
              <template >
              <el-button type="text" size="small" class="review">预览</el-button>
              <el-button type="text" size="small" class="review">禁用</el-button>
              <el-button type="text" size="small" class="review">修改</el-button>
              <el-button type="text" size="small" class="review">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 20, 50]"
          class="el-pagination"
          background
          layout=" sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
        <!-- 弹框组件 -->
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="80%"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
        >
          <re-view v-if="dialogVisible" @close="dialogVisible = false">
          </re-view>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list } from '@/api/hmmm/articles.js'
import reView from './review'
// 引入时间格式化数据
import dayjs from 'dayjs'
export default {
  // 过滤器方法形参是需要格式化的数据
  filters: {
    formatTime (value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  components: {
    reView
  },
  data () {
    return {
      query: {
        page: 1, // 当前页面
        pagesize: 10 // 页面显示的条数
      },
      formData: {
        keyword: ''// 关键字
      },
      dialogVisible: false, // 弹框状态
      keyword: '',
      value: '',
      options: '',
      tableData: [],
      counts: 0 // 组题列表条数
    }
  },
  created () {
    this.listFn() // 调用面试文章列表
  },
  methods: {
    // 格式化文章状态
    formatter (row, column, cellValue, index) {
      const obj = status.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 每页显示的条数发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.listFn() // 刷新列表
    },
    // 当前页面发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.listFn() // 刷新列表
    },
    // 面试文章列表
    async listFn () {
      const res = await list(this.query)
      // console.log(res);
      this.tableData = res.data.items
      this.counts = res.data.counts
      this.state = res.data.items.state
    },
    // 清除
    clearBtn () {

    },
    // 搜索
    searchFn () {}
  }
}
</script>

<style scoped>
.review{
  font-size: 14px;
  margin-left: 10px;

}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.clearfix {
  padding: 1px 18px;
}
.el-alert {
  margin-top: 3px;
}
.math {
  font-size: 14px;
}
.left {
  display: flex;
  justify-content: space-between;
  justify-items: center;
  float: left;
  padding: 5px 30px;
}
.state {
  display: flex;
  justify-content: space-between;
  justify-items: center;
  float: left;
  padding: 0px 10px 10px 30px;
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
}
.right {
  margin-top: -3px;

  float: left;
}
.success {
  float: right;
  margin-top: 8px;
}
.jian {
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
}
.clear {
  margin-bottom: 20px;
}
</style>
